@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

body, .terbulence {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('../image/2.jpg');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% auto;
	overflow: hidden;
}

.terbulence {
	z-index: 0;
	filter: url('#turbulence');
	overflow: hidden;
}

.stuff {
	display: none;
}

.WEBGL-RENDERER {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.butterfly_container {
    position: absolute;
    left: 50%;
    top: 63%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    animation: rotatingY 10s linear infinite;
}

.butterfly_container var {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100px;
	height: 100px;
	margin-left: -50px;
	margin-top: -50px;
	transform-style: preserve-3d;
}

.scene3d {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  overflow: hidden;
}

.butterfly_container var.rotate3d {
	transform: rotate3d(1, 0.5, 0, 70deg);
}

.butterfly_container var.translate3d {
	transform: translate3d(-300px, 0px, 0px);
}

.butterfly_container var.translate3d-1 {
	animation: fluttering 10s ease-in-out infinite;
}

.butterfly_container.scale_half var.scale {
	transform: scale3d(0.5, 0.5, 0.5);
}

.butterfly_container.scale_third var.scale {
	transform: scale3d(0.333, 0.333, 0.333);
}

.butterfly_container.scale_quarter var.scale {
	transform: scale3d(0.25, 0.25, 0.25);
}

.butterfly_container figure.butterfly {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100px;
	height: 100px;
	margin-left: -50px;
	margin-top: -50px;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
}

.butterfly_container figure.butterfly .wing {
	position: absolute;
	width: 50px;
	height: 100px;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
}

.butterfly_container figure.butterfly .wing.right {
	transform-origin: 50px 50px;
	transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
	animation: right-wing-flap 0.5s ease-in-out infinite;
	filter: FlipH;
	-ms-filter: "FlipH";
}

.butterfly_container figure.butterfly .wing.left {
	transform-origin: 50px 50px;
	animation: left-wing-flap 0.5s ease-in-out infinite;
}

.butterfly_container figure.butterfly .wing use {
	display: block;
	transform-style: preserve-3d;
	/* fill: url('#butterfly'); */
	fill: aliceblue;
	stroke: white;
}

@keyframes rotating {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 720deg);
  }
}

@keyframes rotatingY {
  100% {
    transform: rotateY(-360deg);
  }
}

@keyframes fluttering {
  0%, 25%, 50%, 75%, 100% {
    transform: translate3d(0, 0, 0);
  }
  10%, 60% {
    transform: translate3d(0, 150px, 0);
  }
  30%, 80% {
    transform: translate3d(0, 50px, 0);
  }
}

@keyframes left-wing-flap {
  0% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
}

@keyframes right-wing-flap {
  0% {
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
}